<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>成本详细</span>
                </h3>
                <span> </span>
            </div>
            <div class="col-xs-6 text-right"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="row">
            <div class="col-3">
                <assem-tree
                    [batch]="batch"
                    (getOwnCosts)="getOwnCosts($event)"
                    (getOwnAndChildrenCosts)="getOwnAndChildrenCosts($event)"
                ></assem-tree>
            </div>
            <div class="col-9">
                <div class="m-portlet">
                    <div class="m-portlet__body" [hidden]="!showType">
                        <div class="m-widget27 m-portlet-fit--sides" style="margin: -2.2rem;">
                            <div class="m-widget27__container" style="margin-top: 0; padding-top: 0">
                                <!-- begin::Nav pills -->
                                <ul class="m-widget27__nav-items nav nav-pills nav-fill" role="tablist">
                                    <li *ngFor="let simpleCost of simpleCosts" class="m-widget27__nav-item nav-item">
                                        <a class="nav-link active" data-toggle="pill">
                                            {{ simpleCost.category }}
                                            <br />
                                            <b>￥{{ simpleCost.amount | number: "1.2-2" }}</b>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="tabbable-line">
                            <div class="tab-content" style="padding-top:10;">
                                <div class="tab-pane active" id="tab-model">
                                    <div class="row align-items-center" style="padding-top: 15px;">
                                        <div
                                            class="primeng-datatable-container"
                                            [busyIf]="primengTableHelper.isLoading"
                                        >
                                            <p-table
                                                #dataTable
                                                (onLazyLoad)="getCostDetail($event)"
                                                [value]="primengTableHelper.records"
                                                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                                [paginator]="false"
                                                [lazy]="true"
                                                [scrollable]="true"
                                                ScrollWidth="100%"
                                                [responsive]="primengTableHelper.isResponsive"
                                                [resizableColumns]="primengTableHelper.resizableColumns"
                                            >
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 150px">
                                                            条码
                                                        </th>
                                                        <th style="width: 60px">
                                                            车间
                                                        </th>
                                                        <th style="width: 50px">
                                                            年
                                                        </th>
                                                        <th style="width: 50px">
                                                            月
                                                        </th>
                                                        <th style="width: 150px">
                                                            成本类型
                                                        </th>
                                                        <th style="width: 150px">
                                                            成本名称
                                                        </th>
                                                        <th style="width: 100px">
                                                            成本金额
                                                        </th>
                                                        <th style="width: 100px">
                                                            比例
                                                        </th>
                                                        <th style="width: 100px">
                                                            单价
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record="$implicit">
                                                    <tr>
                                                        <th style="width: 150px">
                                                            {{ record.batchId + "@" + record.quantity }}
                                                        </th>
                                                        <td style="width: 60px">
                                                            {{ record.workshop }}
                                                        </td>
                                                        <td style="width: 50px">
                                                            {{ record.time.year }}
                                                        </td>
                                                        <td style="width: 50px">
                                                            {{ record.time.month }}
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{ record.category }}
                                                        </td>
                                                        <td style="width: 150px">
                                                            {{ record.title }}
                                                        </td>
                                                        <td style="width: 100px">
                                                            {{ record.amount }}
                                                        </td>
                                                        <th style="width: 100px">
                                                            {{ record.ratio | number: "1.2-2" }}
                                                        </th>
                                                        <th style="width: 100px">
                                                            {{ record.unitCost | number: "1.2-2" }}
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                            </p-table>

                                            <div
                                                class="primeng-no-data"
                                                *ngIf="primengTableHelper.totalRecordsCount == 0"
                                            >
                                                {{ l("NoData") }}
                                            </div>
                                            <div class="primeng-paging-container">
                                                <p-paginator
                                                    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                                    #paginator1
                                                    (onPageChange)="getCostDetail($event)"
                                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                                    [rowsPerPageOptions]="
                                                        primengTableHelper.predefinedRecordsCountPerPage
                                                    "
                                                >
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{ l("TotalRecordsCount", primengTableHelper.totalRecordsCount) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
